﻿<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <title></title>
        <link rel="stylesheet" href="jquery.mobile-1.3.0/jquery.mobile-1.3.0.css" />
        <link rel="stylesheet" href="css/style.css" />
        <script src="jquery/jquery-1.7.2.js"></script>
        <script src="jquery.mobile-1.3.0/jquery.mobile-1.3.0.js"></script>
        <script src="my.js"></script>
        <!-- User-generated css -->
        <!-- User-generated js -->
    </head>
    <body>
        <!-- Home -->
        <div data-role="page" id="login">
            <div data-role="content">
				<div id="center">
					<div id="clip">
						<!--<img src="images/login_clip.png"/>-->
					</div>
					<h2>Welcom</h2>
					<p>Please Enter your Username and Password</p>
					<div id="form-input">
						<table>
							<tbody>
								<tr>
									<td><img src="images/username_pic.png"/></td>
									<td><input type="text" name="username" id="username" value=""/></td>
								</tr>
								<tr>
									<td colspan = "2"><hr></td>
								</tr>
								<tr>
									<td><img src="images/password_pic.png"/></td>
									<td><input type="password" name="password" id="password" value=""/></td>
								</tr>
							</tbody>
						</table>
					</div>
					<a href="#listpage" data-role="button" data-theme="b" id="btn-login">Login</a>
				</div>
            </div>
        </div>
		<div data-role="page" id="listpage">
            <div data-role="content">
				<div id="center">
					<table>
                        <tr>
                            <td id="li1"><a href="#contact"><p>Contact us</p></a></td>
                            <td id="li2"><a href="#howto"><p>How to</p></a></td>
                        </tr>
                        <tr>
                            <td id="li3"><a href="#index-messages"><p>index massage</p></a></td>
                            <td id="li4"><a href="#event_news"><p>news and events</p></a></td>
                        </tr>
                        <tr>
                            <td id="li5"><a href="#"><p>5</p></a></td>
                            <td id="li6"><a href="#"><p>6</p></a></td>
                        </tr>
                        <tr>
                            <td id="li7"><a href="#social"><p>Social network</p></a></td>
                            <td id="li8"><a href="#"><p>8</p></a></td>
                        </tr>
                    </table>
					</ul>
				</div>
            </div>
        </div>
		<!---------------------------------------------------------------->
		 <div data-role="page" id="contact">
            <div data-role="content">
                <div class="header">
                        <a href="#listpage"><img src="images/home.png"/></a>
                </div>
				<div id="center">
				    <div class="ct1">
                        <img src="images/contact_us1.png"/>
                        <div class="box"></div>
                        <a href="#contact-sent"><img src="images/contact_us2.png"/></a>
                        <div style="clear: both;"></div>
                    </div> 
                    
                    <div class="ct1">
                        <img src="images/contact_us1.png"/>
                        <div class="box"></div>
                        <a href="#contact-sent"><img src="images/contact_us2.png"/></a>
                        <div style="clear: both;"></div>
                    </div>  	
				</div>
            </div>
        </div>
		<!-------------------------------------------------------------->
		<div data-role="page" id="contact-sent">
            <div data-role="content">
                <div class="header">
                        <a href="#" data-rel="back"><img src="images/back_info1.png"/></a>
                </div>
				<div id="center">
				    <div id="form">
                        <p>To:</p><input type="text"/>
                        <div style="clear: both;"></div>
                        <p>Subject:</p><input type="text"/>
                        <div style="clear: both;"></div>
                        <textarea></textarea>
                        <div style="clear: both;"></div>
                        <input id="send" type="submit" value="Send"/>
                    </div>
				</div>
            </div>
        </div>
		<!----------------------------------------------------------------->
		 <div data-role="page" id="ct-sent-success">
            <div data-role="content">
                <div class="header">
                        <a href="#listpage"><img src="images/home.png"/></a>
                </div>
				<div id="center">
				    Your email has been send successfully :)
				</div>
            </div>
        </div>
		<!------------------------------------------------------------------>
		<div data-role="page" id="howto">
            <div data-role="content">
                <div class="header">
                        <a href="#listpage"><img src="images/home.png"/></a>
                </div>
				<div id="center">
				    <div class="ht1">
                        <input type="text"/>
                        <div style="clear: both;"></div>
                    </div>
                    <div class="ht1">
                        <input type="text"/>
                        <div style="clear: both;"></div>
                    </div>
                    <div class="ht1">
                        <input type="text"/>
                        <div style="clear: both;"></div>
                    </div>
				</div>
            </div>
        </div>
		<!---------------------------------------------------------------------->
		 <div data-role="page" id="index-messages">
            <div data-role="content">
                <div class="header">
                        <a href="#"><img src="images/home.png"/></a>
                </div>
				<div id="center">
				    
                    <div class="ht1 green">
                        <input class="left" type="text"/>
                        <input class="right" type="text"/>
                        <div style="clear: both;"></div>
                    </div>
                    <div class="ht1 blue">
                        <input class="left" type="text"/>
                        <input class="right" type="text"/>
                        <div style="clear: both;"></div>
                    </div>
                    <div class="ht1 red">
                        <input class="left" type="text"/>
                        <input class="right" type="text"/>
                        <div style="clear: both;"></div>
                    </div>
                    <div class="ht1 yellow">
                        <input class="left" type="text"/>
                        <input class="right" type="text"/>
                        <div style="clear: both;"></div>
                    </div>
				</div>
            </div>
        </div>
		<!------------------------------------------------------------------->
		 <div data-role="page" id="event_news">
            <div data-role="content">
                <div class="header">
                        <a href="#listpage"><img src="images/home.png"/></a>
                </div>
				<div id="center">
				    <div class="thisweek">
                        <h2>Events and News for this week</h2>
                        <div class="en1"></div>
                    </div>
                    <div class="latest">
                        <h2>Latest Events and News</h2>
                        <div class="en1"></div>
                        <div class="en1"></div>
                    </div>
				</div>
            </div>
        </div>
		<!-------------------------------------------------------------------------->
		 <div data-role="page" id="social">
            <div data-role="content">
                <div class="header">
                        <a href="#"><img src="images/home.png"/></a>
                </div>
				<div id="center">
                    <a href="#"><img src="images/sn_facebook.png"/></a>
				    <a href="#"><img src="images/sn_twitter.png"/></a>
				</div>
            </div>
        </div>
		
    </body>
</html>
